<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Keywords" content="Nutz,Nutz是什么,Nutz下载,Nutz社区, Java框架,JavaWeb,Aop,ORM,Dubbo,JDK8, JavaEE,tomcat,jetty"/>
    <title>Hello, So NB!</title>
    <link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/jquery/dist/jquery.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="16" :offset="4">
                    <el-menu :default-active="activeMenu" mode="horizontal" @select="menuChange">
                        <el-menu-item index="1">构筑中心</el-menu-item>
                        <el-menu-item index="2">关于NB</el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row v-if="activeMenu == 1">
                <!--配置界面-->
                <el-col :span="16" :offset="4" v-show="!making">
                    <el-form ref="nb" :model="nb" label-width="100px">
                        <!--NB-->
                        <el-form-item label="NB版本">
                            <el-select v-model="nb.version" placeholder="请选择">
                                <el-option
                                        v-for="item in versionOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!--packageName-->
                        <el-form-item label="顶层包名">
                            <el-input v-model="nb.packageName"></el-input>
                        </el-form-item>

                        <!--Nutz.MVC-->
                        <el-form-item label="Nutz.Mvc">
                            <el-switch v-model="nb.nutzmvc.enable"></el-switch>
                        </el-form-item>

                        <!--Nutz.Dao-->
                        <el-form-item label="Nutz.Dao">
                            <el-switch v-model="nb.nutzdao.enable"></el-switch>
                        </el-form-item>
                        <el-form-item label="Dao.Cache" v-show="nb.nutzdao.enable">
                            <el-switch v-model="nb.nutzdao.cache"></el-switch>
                        </el-form-item>

                        <!--JETTY-->
                        <el-form-item label="Jetty">
                            <el-switch v-model="nb.jetty.enable"></el-switch>
                        </el-form-item>
                        <el-form-item label="Host" v-show="nb.jetty.enable">
                            <el-input v-model="nb.jetty.host"></el-input>
                        </el-form-item>
                        <el-form-item label="Port" v-show="nb.jetty.enable">
                            <el-input v-model="nb.jetty.port"></el-input>
                        </el-form-item>

                        <!--JDBC-->
                        <el-form-item label="Jdbc">
                            <el-switch v-model="nb.jdbc.enable"></el-switch>
                        </el-form-item>
                        <el-form-item label="DriverType" v-show="nb.jdbc.enable">
                            <el-input v-model="nb.jdbc.driver_type"></el-input>
                        </el-form-item>
                        <el-form-item label="Url" v-show="nb.jdbc.enable">
                            <el-input v-model="nb.jdbc.url"></el-input>
                        </el-form-item>
                        <el-form-item label="Username" v-show="nb.jdbc.enable">
                            <el-input v-model="nb.jdbc.username"></el-input>
                        </el-form-item>
                        <el-form-item label="Password" v-show="nb.jdbc.enable">
                            <el-input v-model="nb.jdbc.password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <!--配置清单-->
                <el-col :span="16" :offset="4" v-show="making">
                    <el-form label-width="100px">
                        <el-input autosize type="textarea" v-model="nbJson"></el-input>
                    </el-form>
                    <div style="margin-top: 20px"></div>
                    <!--<el-progress type="circle" :percentage="makper"-->
                    <!--:status="makper == 100 ? 'success': ''"></el-progress>-->
                    <el-progress :text-inside="true" :stroke-width="18" :percentage="makper"
                                 :status="makper == 100 ? 'success': ''"></el-progress>
                    <div style="margin-top: 20px"></div>
                    <el-button type="success" @click="downloadNB" v-show="done">点击下载</el-button>
                </el-col>
            </el-row>
            <el-row v-if="activeMenu == 2">
                <el-col :span="16" :offset="4">
                    嗯。。。还没想到要写啥
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                activeMenu: '1',
                making: false,
                makper: 0,
                upload: false,
                done: false,
                versionOptions: [{
                    label: "2.0-SNAPSHOT",
                    value: "2.0-SNAPSHOT"
                }, {
                    label: "2.0-Preview",
                    value: "2.0-Preview"
                }],
                nb: {
                    packageName: "io.nutz.demo",
                    version: "2.0-SNAPSHOT",
                    nutzmvc: {
                        enable: true
                    },
                    nutzdao: {
                        enable: true,
                        cache: false
                    },
                    jetty: {
                        enable: true,
                        port: 8080,
                        host: "127.0.0.1"
                    },
                    jdbc: {
                        enable: true,
                        driver_type: "mysql",
                        url: "jdbc:mysql://127.0.0.1/demo",
                        username: "root",
                        password: "root"
                    }
                },
                nbJson: "",
                nbUrl: ''
            }
        },
        methods: {
            menuChange(index) {
                this.activeMenu = index;
            },
            buildNB: function () {
                var self = this;
                self.upload = true;
                $.ajax({
                    url: "/maker/make",
                    type: "POST",
                    data: JSON.stringify(self.nb),
                    dataType: "json",
                    success: function (re) {
                        if (re && re.ok) {
                            self.upload = false;
                            self.nbUrl = "/maker/download/" + re.key;
                        } else {
                            self.$message.error('创建失败了，请联系wendal');
                        }
                    }
                });
            },
            downloadNB: function () {
                var durl = window.origin + this.nbUrl;
                console.log("DW: " + durl);
                window.open(durl);
                this.making = false;
                this.done = false;
                this.makper = 0;
            },
            onSubmit() {
                this.nbJson = JSON.stringify(this.nb, null, 2);
                this.making = true;
                this.buildNB();
                var self = this;
                var upInterval = setInterval(function () {
                    if (self.makper < 100) {
                        self.makper += 5;
                    } else {
                        if (!self.upload) {
                            window.clearInterval(upInterval);
                            self.makper = 100;
                            self.done = true;
                        } else {
                            self.makper = 10;
                        }
                    }
                }, 50);
            }
        }
    })
</script>
</html>